<template>
  <div>
    <div class="content">
      <filterTitle @query="query" @reset="reset" class="title" :form="form" :formData="formData" ref='form'>
      </filterTitle>
      <LsdTable class="lsd-table" slot="zbxx" @select="handleSelectionChange" :paginationAtrrs="table.paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="zbxx" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @onActionClick="onActionClick" :dialogConfig="dialogConfig" @close="close" @handleBtn="onActionClick">
      <div slot="dialog" class="jgpz_box">
        <!-- <filterTitle :title="title" class="dialogTitle"> -->
        <el-form slot="filter" class="zbyh_box">
          <DialogForm ref="formDialog" :formConfig="formConfig" />
        </el-form>
        <!-- </filterTitle> -->
      </div>
    </LsdDialog>
  </div>
</template>
<script>
import { unitList, dutyInfo, saveDutyInfo, synchronization } from "@/api/SystemConfig/dutyConfig.js";
export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      const moblie = /^1(3|4|5|6|7|8|9)\d{9}$/;
      const tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/;
      if (!moblie.test(value) && !tel.test(value)) {
        callback(new Error("请输入正确合规的手机号码或座机号码(区号-座机号码)"));
      } else {
        callback();
      }
    };
    return {
      title: "基本信息",
      form: {
        orgName: "",
        dutyTelephone: ""
      },
      formData: [
        {
          elType: "lsdTree",
          id: "orgName",
          name: "orgId",
          label: "单位名称",
          keyWord: "keyWord",
          treeRef: "treeRef",
          commonClick: true,
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "input",
          label: "电话号码",
          id: "dutyTelephone"
        }
      ],
      // 值班表格
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "zbxx",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "值班信息",
        actions: [
          {
            id: "ListAdd",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "export",
            text: "导出",
            btnAttr: { size: "small" }
          },
          {
            id: "synchronization",
            text: "同步值班人员库",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "orgName",
            label: "单位名称",
            align: "center"
          },
          {
            prop: "dutyAddress",
            label: "值班地点",
            align: "center"
          },
          {
            prop: "dutyTelephone",
            label: "电话号码",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            render: (h, scope) => {
              return (
                <div>
                  <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                    on: {
                      click: () => {
                        this.ListAdd(scope.row);
                      }
                    }
                  }}>
                    编辑
                  </span>
                  <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                    on: {
                      click: () => {
                        this.$confirm("确定删除吗？", "提示", {
                          confirmButtonText: "确定",
                          cancelButtonText: "取消",
                          type: "warning"
                        }).then(() => {
                          const option = {
                            deptId: scope.row.id,
                            deptName: scope.row.orgName,
                            dutyAddr: "",
                            dutyPhone: ""

                          };
                          this.saveDutyInfo(option, "删除成功");
                        });

                      }
                    }
                  }}>
                    删除
                  </span>

                </div>
              );

            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 新增值班表单
      formConfig: {
        formData: [
          {
            type: "selectTree",
            label: "单位名称",
            prop: "deptName",
            name: "deptId",
            treeRef: "treeRef",
            keyword: "keywords",
            disabled: false,
            clickClose: true,
            commonClick: true,
            title: "单位名称选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            label: "值班地址",
            type: "input",
            prop: "dutyAddr",
            lableWidth: "140px"
          },
          {
            label: "电话号码",
            type: "input",
            prop: "dutyPhone",
            lableWidth: "140px"
          }
        ],
        rules: {
          deptName: [
            { required: true, message: "请选择单位名称", trigger: "blur" }
          ],
          dutyAddr: [
            { required: true, message: "请输入值班地址", trigger: "blur" }
          ],
          dutyPhone: [
            { required: true, trigger: "blur", validator: checkPhone }
          ]
        }
      },
      dialogConfig: {
        title: "",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      params: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.getUnitList();
    this.getPageList();
  },
  methods: {
    // 获取单位名称
    async getUnitList() {
      const res = await unitList();
      this.formData[0].treeData.attrs.data = res;
      this.formConfig.formData[0].treeData.data = res;
    },
    // 获取值班信息
    async getPageList(data) {
      const res = await dutyInfo(Object.assign(this.params, data));
      this.table.tableData = res.data;
      this.table.paginationAtrrs.total = res.total;
    },
    ListAdd(row) {
      this.dialogConfig.isShow = true;
      this.dialogConfig.title = "新增值班用户";
      this.formConfig.formData[0].disabled = false;
      // 编辑
      if (row) {
        this.$nextTick(() => {
          this.dialogConfig.title = "编辑值班用户";
          this.formConfig.formData[0].disabled = true;
          const option = {
            deptId: row.id,
            deptName: row.orgName,
            dutyAddr: row.dutyAddress,
            dutyPhone: row.dutyTelephone
          };
          this.$refs.formDialog.form = option;
        });
      }
    },
    // 同步值班人员库
    async synchronization() {
      const res = await synchronization();
      console.log(res);
    },
    // 查询
    query() {
      this.params.pageSize = 10;
      this.params.pageNum = 1;
      this.getPageList(this.form);
    },
    // 清空
    reset() {
      this.$refs.form.resetFields();
    },
    deptChoose(val, item) {
      this.form.orgName = val[0].orgName;
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 单选多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.params.pageNum = val["current-page"];
      this.params.pageSize = val["page-size"];
      this.getPageList();
    },
    async saveDutyInfo(data, msg) {
      try {
        await saveDutyInfo(data);
        this.$message({
          message: msg,
          type: "success"
        });
        this.dialogConfig.isShow = false;
        this.getPageList();
      } catch (err) {
        console.log(err);
      }
    },

    // 保存
    save() {
      this.$refs.formDialog.$refs.formInlines.validate((valid) => {
        if (!valid) return;
        this.saveDutyInfo(this.$refs.formDialog.form, "添加成功");
      });
    },
    cancel() {
      this.dialogConfig.isShow = false;
    },
    close() {
      this.dialogConfig.isShow = false;
      this.$refs.formDialog.resetFields();
    }
  }
};

</script>
<style lang="less" scoped>
.content {
  padding: 20px;
}

.zbyh_box {
  margin-top: 20px;
}

.jgpz_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  :deep(.el-form-item) {
    width: 100%;

    .el-form-item__content {
      flex: 1;
    }

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      width: 100%;
      height: 32px;
      margin-bottom: 0;
    }
  }
}
</style>
